<template>
  <section id="Company">
    <iLayout left>
      <section slot="title">公司列表</section>
      <section slot="left">
        <section class="list">
          <section class="list-item" v-for="item in data" :key="item.id" @click="showDetail(item)">
            <span class="list-item-name">{{ item.companyName }}</span>
            <span class="list-item-action">
              <el-button type="warning" icon="el-icon-edit" size="mini" circle title="修改" @click.stop="editCompany(item)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" circle title="删除" @click.stop="delCompany(item)"></el-button>
            </span>
          </section>
          <section class="list-item text-center" @click="addCompany"><i class="el-icon-plus"></i></section>
        </section>
      </section>
      <section slot="right">
        <company-form ref="form" :title="title" :model="form" :operation="isOperation" :add="isAdd" @cancel="cancel"></company-form>
      </section>
    </iLayout>

    <el-dialog title="删除公司" :visible.sync="isDelete" width="30%">
      该操作将删除公司：<el-tag type="danger">{{ form.companyName }}</el-tag
      >，您确定要删除吗？
      <section slot="footer">
        <el-button type="default" icon="el-icon-close" round title="取消" @click="cancel"></el-button>
        <el-button type="primary" icon="el-icon-check" round title="确认" @click="confirm"></el-button>
      </section>
    </el-dialog>
  </section>
</template>

<script>
import * as company from '../../api/private/company'
import CompanyForm from './components/company_form.vue'
export default {
  name: 'Company',
  components: {
    CompanyForm
  },
  data: () => ({
    data: [],
    form: {},
    rules: {
      companyName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
      usci: [
        {
          required: true,
          message: '社会统一信用代码不能为空',
          trigger: 'blur'
        }
      ]
    },
    title: '公司信息详情',
    isOperation: false,
    isAdd: false,
    isDelete: false
  }),
  methods: {
    async getCompany() {
      const data = await company.getCompany(this.page)
      if (data.code === 0) {
        this.data = data.data
        this.$store.commit('setCompanyData', data.data)
      }
    },
    showDetail(data) {
      this.form = data
      this.isOperation = false
      this.title = '公司信息详情'
      this.isDelete = false
    },
    confirm() {
      if (this.isDelete) this.confirmDeleteCompany()
    },
    cancel() {
      this.title = '公司信息详情'
      this.isOperation = false
      this.isDelete = false
      this.form = {}
      this.getCompany()
    },
    addCompany() {
      this.title = '新增公司信息'
      this.form = {}
      this.isOperation = true
      this.isAdd = true
      this.isDelete = false
    },
    editCompany(data) {
      this.title = '修改公司信息'
      this.form = data
      this.isOperation = true
      this.isAdd = false
      this.isDelete = false
    },
    delCompany(data) {
      this.form = data
      this.isOperation = false
      this.isDelete = true
    },
    async confirmDeleteCompany() {
      const data = await company.delCompany([this.form.id])
      if (data.code === 0) {
        this.$msg.success(`公司删除成功`)
        this.cancel()
      } else {
        this.$msg.error(`公司删除失败，${data.msg}`)
      }
    }
  },
  created() {
    this.getCompany()
  }
}
</script>

<style lang="scss" scoped>
#Company {
  width: 100%;
  height: 100%;
  position: relative;

  .list {
    width: 100%;
    box-sizing: border-box;

    .list-item {
      transition: all 0.1s ease-in-out;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.5rem;
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
      font-size: 1.05rem;
      // box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.15);
      cursor: pointer;
      font-weight: bold;

      &:hover {
        box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.2), 0 -0.05rem 0.1rem rgba(0, 0, 0, 0.1);

        & > .list-item-name {
          margin-right: 1rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        & > .list-item-action {
          display: inline;
        }
      }

      .list-item-name {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .list-item-action {
        display: none;
      }
    }

    .text-center {
      justify-content: center;
    }
  }

  .form {
    width: 35rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin: 3rem auto;
    box-sizing: border-box;

    .form-title {
      width: 100%;
      font-size: 1.5rem;
      margin: 2rem 0;
    }

    .form-body {
    }

    .form-action {
      margin-top: 3rem;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
